import React, { FC, useEffect, useLayoutEffect, useRef, useState } from 'react'
import GoodsList from '@/components/goods/goodsList'
import Address from '@/components/address/index'
import Loading from '@/components/home/loading/saleLoading'
import Header from '@/components/home/header'
import Payment from '@/components/payment/index'
import { orderConfirmIndex } from '@/api/orderConfirm'
import { OrderConfirm } from '@/types/orderConfirm'
import { useAppSelector, useAppDispatch } from '@/store'
import { initCurrendStdAdd, selectCurrendStdAdd } from '@/store/address'
import { useUpdateEffect } from 'ahooks'

/**
 * 确认支付页面
 */
const welfare: FC<{}> = () => {
  const ref = useRef<HTMLDivElement>(null)
  const ref2 = useRef<HTMLDivElement>(null)
  const [loading, setLoading] = useState(false)
  const [orderConfirmData, setOrderData] = useState<Partial<OrderConfirm> | undefined>(undefined)
  const dispatch = useAppDispatch()
  const currendStdAdd = useAppSelector(selectCurrendStdAdd)
  useEffect(() => {
    //param to do
    orderConfirmIndex({}).then((res) => {
      setOrderData(res.result.data)
      if (currendStdAdd && !currendStdAdd.id) {
        dispatch(initCurrendStdAdd(res.result.data.stuAdd))
      }
    })
  }, [])
  /**重新计算高度 */
  useUpdateEffect(() => {
    if (ref.current && ref2.current) {
      ref2.current.style.height = ref.current.offsetTop + 100 + 'px'
    }
  }, [ref.current])
  //initCurrendStdAdd
  return (
    <div className="w-full h-auto overflow-y-auto bg-bray-F7F7F8 " ref={ref2}>
      <Header
        cb={function (): void {
          throw new Error('Function not implemented.')
        }}
        headerText={'确认订单'}
      ></Header>
      {loading ? <Loading noBorder={true} modal={true}></Loading> : null}
      {orderConfirmData?.isSend ? <Address></Address> : null}
      {orderConfirmData ? (
        <GoodsList productInfo={orderConfirmData?.productInfo || []}></GoodsList>
      ) : null}
      {orderConfirmData ? <Payment paymentData={orderConfirmData as OrderConfirm}></Payment> : null}

      <div ref={ref}></div>
    </div>
  )
}

export default welfare
